<template> 
   <div class="container" >
      <div>
          <input class="form-control" :placeholder="$t('teacher.userName1')" v-model="formData.userName">
          <input class="form-control" :placeholder="$t('teacher.nickname1')" v-model="formData.niceName">
          <button class="btn"  @click="queryUserTeacherData" :title="$t('teacher.Search')"><el-icon><Search/></el-icon></button>
          <button class="btn"  @click="addUserTeacher" :title="$t('teacher.Plus')"><el-icon><Plus/></el-icon></button>
         <DeleteUserTeacher :user-list="userList" @getSelectData="getSelectData" @reback="queryUserTeacherData"></DeleteUserTeacher>
      </div>
      
      <el-config-provider :locale="locale"> 
      <el-table ref="userTableRef" :data="tableData" :height="height" stripe style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" :label="$t('teacher.id')" width="55"/>
      <el-table-column prop="userName" :label="$t('teacher.userName')"/>
      <el-table-column prop="nickname" :label="$t('teacher.nickname')"/>
      <el-table-column prop="phone" :label="$t('teacher.phone')" />
      <el-table-column prop="email" :label="$t('teacher.email')"/>
      <el-table-column prop="level" :label="$t('teacher.level')" show-overflow-tooltip>
        <template #default="scope">
            <span v-if="scope.row.level === 1">{{ $t('teacher.JuniorTeacher') }}</span>
            <span v-else-if="scope.row.level === 2">{{ $t('teacher.IntermediateTeacher') }}</span>
            <span v-else-if="scope.row.level === 3">{{ $t('teacher.SeniorTeacher') }}</span>
        </template>    
      </el-table-column>
      <el-table-column prop="role" :label="$t('teacher.role')">
        <template #default="scope">
            <span v-if="scope.row.role === 0">{{ $t('teacher.Administrators') }}</span>
            <span v-else-if="scope.row.role === 1">{{ $t('teacher.Student') }}</span>
            <span v-else-if="scope.row.role === 2">{{ $t('teacher.Teacher') }}</span>
        </template>    
      </el-table-column>  
      <el-table-column fixed="right" :label="$t('teacher.operate')" width="180">
        <template #default="scope"> 
          <a class="btn" :title="$t('teacher.Edit')"  @click="MotifyTea(scope.row)" ><el-icon><Edit/></el-icon></a>
          <a class="btn" :title="$t('teacher.Delete')" @click="deleteUserTea(scope.row)"> <el-icon><Delete/></el-icon></a>
        </template>
      </el-table-column> 
    </el-table> 
      <nav class="tr">
          <el-pagination
          v-model:current-page="formData.page"
          v-model:page-size="formData.rp"
          :page-sizes="[100, 20, 50, 100]"
          layout="sizes, prev, pager, next,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
  
          /> 
      </nav>
  </el-config-provider>
   </div>
  </template>
  <script>
  import { Edit,Plus,Search,Delete } from '@element-plus/icons-vue'
  import DeleteUserTeacher from '@/components/DeleteUserTeacher.vue'
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  import en from 'element-plus/dist/locale/en.mjs'
  import { reactive,toRefs,computed, ref } from 'vue'
  import MotifyTea from './MotifyTea.vue'
   export default {
      name: 'APP',
      components:{
          Edit,Plus,Search,DeleteUserTeacher,Delete
      },
      data: function(){ 
      return {
          height:200,
           tableData:[],
           total:20,
           formData:{
              page:1,
              rp:10,
              userName:"",
              nickname:""
           },
           userList:[]
      }
      },
      methods:{
        
        queryUserTeacherData(){
              var that = this;
              window.http.post('/api/user/queryUserTeacherList',this.formData).then(res => {
                 
                 var data = res.data;
                 that.tableData = data;
              }) 
              .catch(function(error){
                 that.$message.error('服务器异常');
              });
              window.http.post('/api/user/queryUserTeacherTotal',this.formData).then(res => {
                 
                 var data = res.data;
                 if(data.success){
                  that.total = data.total;
                 }
              }) 
              .catch(function(error){
                 that.$message.error('服务器异常');
              })
          },
          addUserTeacher(){
            this.$router.push({
                    name:"addtea",
                    });  
          },
          handleSizeChange(){
              this.queryUserTeacherData();
          },
          handleCurrentChange(){
              this.queryUserTeacherData();
          },
          getSelectData(){
             var array= this.$refs.userTableRef.getSelectionRows();
             this.userList=array;
          },
          deleteUserTea(row){
           console.info(JSON.stringify(row));
           this.userList.splice(0,this.userList.length);
           this.userList.push(row);
           this.$bus.emit("deleteUserTeaById");
          },
          MotifyTea(row){
            this.userList.push(row);
            this.$router.push({
                    name:"motifytea",
                    query:{phone:this.userList[0].phone}
                    });   
        },
      },
      mounted(){
          var app =document.getElementById("app");
          this.height=app.clientHeight-190;
          this.queryUserTeacherData();
      },
      updated(){
          console.log(" updated currentPage:" + this.currentPage + "\t pageSize:" + this.pageSize);
          
      },
      setup(){
          const language = ref('zh-cn')
          const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
          const toggle = () => {
          language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
          }
          return{
              language,
              locale,
              toggle,
          }
        }
      }
  </script>
  <style scoped> 
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
   .tr{
   width: 100%;
   flex-basis: 50px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
  
   align-items: center;
   }
   .second{
   background-color: aqua;
   }
   .form-control{
      display: inline-block;
      width: 200px;
      margin-right: 10px;
   }
   .btn{
      margin-right: 5px;
  
   }
   
  </style> 